<template>
  <div>
    <table width="800" style="text-align: center; margin: 0 auto" border="1">
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <tr>
        <th>苹果 ¥ {{ aa }} / 斤, 折扣 &lt; {{ bb * 10 }} 折 &gt;</th>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数
          <input type="number" v-model="cc" placeholder="斤数" />
        </td>
      </tr>
      <tr>
        <td>
          <!-- 静态页面6个变量使用后, 绑定点击事件 -->
          <button @click="aaa">结账买单~</button>
        </td>
      </tr>
      <tr>
        <td>
          结账单:
          <span>总价:{{ dd }} ¥元</span>
          <span>折后价:{{ ee }} ¥元</span>
          <span>省了:{{ ff }} ¥元</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aa: 10, //单价
      bb: 0.7, //折扣
      cc: 0, //斤数开始是0
      dd: 0, //总价开始也是0
      ee: 0, //折扣价开始也是0
      ff: 0, //省了多少钱
    };
  },
  methods: {
    aaa() {
      this.dd = this.aa * this.cc; //总价钱
      this.ee = this.bb * this.dd; //打折完后的钱
      this.ff = this.dd - this.ee; //省了多少钱
    },
  },
};
</script>

<style>
</style>